<template>
  <div class="app-container">
    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="settlementLogs" :element-loading-text="$t('Searching')" border fit highlight-current-row>
      <el-table-column type="index" width="50"></el-table-column>

      <el-table-column align="center" :label="$t('面额')" prop="amount">
        <template slot-scope="scope">
          {{scope.row.amount | floorTwoDecimal}}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('数量')" prop="number"/>

      <el-table-column align="center" :label="$t('小计')">
        <template slot-scope="scope">
          {{scope.row.amount * scope.row.number | floorTwoDecimal}}
        </template>
      </el-table-column>
    </el-table>

    <br/>

    <el-row>
      <el-col :span="4" :offset="16"><div class="grid-content bg-purple">{{$t('订单金额')}}：{{settlement.orderAmount | floorTwoDecimal}}</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">{{$t('实收金额')}}：{{settlement.actualAmount | floorTwoDecimal}}</div></el-col>
    </el-row>
  </div>
</template>

<script>
  import { settlementDetail} from '@/api/shop'
  import BackToTop from '@/components/BackToTop'
  import store from '@/store'

  export default {
    name: "handoverDetail",
    components:{
      BackToTop
    },
    data(){
      return {
        // 当前店铺
        shop: store.state.user.shop,
        listLoading: true,
        listQuery: {
          id: undefined
        },
        settlement: {},
        settlementLogs: [],
      }
    },
    created() {
      this.listQuery.id = this.$route.query.id
      this.getList()
    },
    methods: {
      getList(){
        settlementDetail(this.listQuery.id)
          .then(response => {
            this.settlementLogs = response.data.data.settlementLogs
            this.settlement = response.data.data.settlement
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      }
    }
  }
</script>

<style scoped>

</style>
